/*
 * @Author: zhouc 
 * @Date: 2024-04-19 09:56:51 
 * @Function: 巡查首页
 * @Last Modified by: zhouc
 * @Last Modified time: 2024-05-13 11:22:09
 */
<template>
  <div class="patrol-container">
    <div :style="route.path === '/home' ? 'display: block' : 'display: none'">
      <TimePicker @timeChange="timeChange" fromType="home" />

      <div class="tip" @click="() => router.push('/evaluationCriteria')">
        <img :src="require('@/assets/img/tip_icon.png')" />
        <text>打分准则</text>
      </div>

      <van-list
        v-model:loading="rec.loading"
        :finished="rec.finished"
        :immediate-check="false"
        finished-text="暂无数据"
        loading-text="正在加载中......"
        @load="onLoad"
      >
        <div class="scoring-item" v-for="item in rec.list" :key="item">
          <div class="item-top" @click="onScore(item)">
            <div class="title">{{ item.classes }}</div>
            <div class="score-box">
              <div class="score">{{ item.totalScore.toLocaleString() }}</div>
              <div class="text">总评</div>
            </div>
          </div>
          <div class="item-bottom">
            <div class="btn" @click="() => handleToEnterBehavior(item)">
              打分
            </div>
          </div>
        </div>
      </van-list>

      <Tabbar />
    </div>

    <router-view
      :v-if="route.path === '/classEvaluation'"
      :class="
        route.path === '/classEvaluation'
          ? 'evaluation-box'
          : 'enterBehavior-box'
      "
    ></router-view>
  </div>
</template>

<script lang="ts" setup>
import { useRoute, onBeforeRouteUpdate } from "vue-router";
import { reactive } from "vue";
import router from "@/router";
import TimePicker from "@/components/time-picker/index.vue";
import Tabbar from "@/components/tabbar/index.vue";
import { queryInspectionScoreByClass } from "@/service/modules/evaluation";
import { useStore } from "@/store";

document.title = "班级打分";

const store = useStore();
const route = useRoute();

// const { name, personId } = LocalCache.getSession("userInfo");

const rec = reactive<any>({
  list: [],
  selectTime: {},
  loading: false,
  finished: false,
  routerPushType: "",
});

let num = 1;

onBeforeRouteUpdate((updateGuard) => {
  // 判断是否是从打分页面返回
  if (
    updateGuard.fullPath === "/home" &&
    rec?.routerPushType === "enterBehavior"
  ) {
    const succeccScoring = store.state.setEvaluate?.succeccScoring;
    if (succeccScoring) {
      // 打分成功后，循环查找班级，手动更改分数
      rec.list.forEach((item, index) => {
        if (
          item.classes === succeccScoring.classes &&
          item.grade === succeccScoring.grade
        ) {
          rec.list[index].totalScore =
            rec.list[index].totalScore + succeccScoring.behaviorScore;
        }
      });
    }
  }
});

const onLoad = async () => {
  rec.loading = true;
  rec.finished = false;
  Reflect.deleteProperty(rec.selectTime, "grade");

  const { code, rows, total } = await queryInspectionScoreByClass({
    ...rec.selectTime,
    pageNum: num,
    pageSize: 20,
  });

  if (code === 0 && rows.length > 0) {
    rec.list = [...rec.list, ...rows];

    // 加载状态结束
    rec.loading = false;

    num++;

    if (rec.list.length >= total) {
      rec.finished = true;
    }
  } else {
    rec.list = [];
    rec.finished = true;
  }
};

let changeData: any = {};
const timeChange = (selectTime: any, data: any) => {
  num = 1;
  let gradeAndClassFlat;
  changeData = data;
  const gradeAndClass = selectTime.grade.map((item: any) => {
    if (item.children.length === 0) {
      return {
        gradeName: item.unitName,
        gradeId: item.unitId,
      };
    }

    return item.children.map((subItem: any) => {
      const result: any = {};
      result.gradeName = item.unitName;
      result.gradeId = item.unitId;
      result.className = subItem.unitName;
      result.classId = subItem.unitId;
      return result;
    });
  });

  gradeAndClassFlat = gradeAndClass.flat();

  rec.list = [];
  rec.selectTime = { ...selectTime, gradeAndClasses: gradeAndClassFlat };

  onLoad();
};

const onScore = (item: any) => {
  store.commit("setEvaluate/changeSucceccScoring");
  router.push(
    `/classEvaluation?year=${changeData.year}&weekIndex=${changeData.weekIndex}&semesterValue=${changeData.semesterValue}&month=${changeData.month}&classes=${item.classes}&grade=${item.grade}&classId=${item.classesId}&gradeId=${item.gradeId}&startTime=${rec.selectTime.startTime}&endTime=${rec.selectTime.endTime}&isRouter=true`
  );
};

const handleToEnterBehavior = (item: {
  classes: string;
  grade: string;
  gradeId: string;
  classesId: string;
  id: string;
}) => {
  rec.routerPushType = "enterBehavior";
  store.commit("setEvaluate/changeSelectBehavior", {});
  store.commit("setEvaluate/changeSucceccScoring");
  router.push(`/enterBehavior?classes=${item.classes}&grade=${item.grade}&gradeId=${item.gradeId}&classesId=${item.classesId}`);
};
</script>

<style lang="less" scoped>
.patrol-container {
  width: 100%;
  min-height: 100vh;
  padding: 48px 0 50px;
  background-color: #f7f7f7;

  .tip {
    width: 95px;
    padding: 15px 0 0 16px;
    font-size: 14px;
    color: #919599;
    display: flex;
    align-items: center;

    img {
      margin-right: 4px;
      width: 16px;
      height: 16px;
    }

    text {
      line-height: 18px;
    }
  }

  .scoring-item {
    background-color: #fff;
    margin: 16px 16px 0 16px;
    height: 112px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;

    .item-top {
      padding: 0 16px;
      height: 72px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 0.5px solid #e1e5ea;

      .title {
        font-size: 16px;
        font-weight: 500;
        line-height: 19px;
      }

      .score-box {
        display: flex;
        flex-direction: column;
        align-items: end;

        .score {
          color: #3e77fa;
          font-size: 18px;
          font-weight: 700;
          line-height: 22px;
        }

        .text {
          color: #c2c6cc;
          font-size: 12px;
          font-weight: 500;
          line-height: 18px;
        }
      }
    }

    .item-bottom {
      flex: 1;
      display: flex;
      padding-right: 16px;
      justify-content: end;
      align-items: center;

      .btn {
        width: 56px;
        height: 24px;
        background-color: #3e77fa;
        border-radius: 18px;
        color: #fff;
        font-size: 12px;
        font-weight: 500;
        text-align: center;
        line-height: 24px;
      }
    }
  }

  .evaluation-box,
  .enterBehavior-box {
    position: fixed;
    top: 48px;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    overflow: auto;
  }

  .enterBehavior-box {
    top: 0;
    background-color: #fff;
  }
}
</style>
